<template>
  <div class="maintain">
    <el-dialog
      title="修改标的信息"
      :visible.sync="dialogFormVisible"
      width="30%"
    >
      <el-form :model="form" label-width="100px">
        <el-form-item label="借款编号">
          <el-input disabled v-model="form.num"></el-input>
        </el-form-item>
        <el-form-item label="借款方">
          <el-input disabled v-model="form.borrower"></el-input>
        </el-form-item>
        <el-form-item disabled="" label="借款人手机">
          <el-input disabled v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item disabled="" label="标名">
          <el-input v-model="form.entitle"></el-input>
        </el-form-item>
        <el-form-item label="借款金额">
          <el-input v-model="form.money"></el-input>
        </el-form-item>
        <el-form-item label="年利率化">
          <el-input v-model="form.annual"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="form.state"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="item in stateList"
              :label="item.sname"
              :key="item.id"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="reBack">返回</el-button>
      </div>
    </el-dialog>

    <div id="nav">
      <el-form>
        <el-form-item prop="region">
          <el-row :gutter="20">
            <el-col :span="4"
              ><div class="grid-content">
                <el-input
                  placeholder="请输入借款方"
                  suffix-icon="el-icon-search"
                  v-model="peopleList.borrower"
                  @keyup.native="getData"
                >
                </el-input></div
            ></el-col>
            <el-col :span="4"
              ><div class="grid-content">
                <el-input
                  placeholder="请输入借款人手机"
                  suffix-icon="el-icon-search"
                  v-model="peopleList.phone"
                  @keyup.native="getData"
                >
                </el-input></div
            ></el-col>
            <el-col :span="4"><div></div></el-col>
            <el-col :span="12"><div></div></el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
    <div id="table">
      <el-table
        stripe
        style="width: 100%"
        :data="tableData"
        v-loading="loading"
      >
        <el-table-column prop="num" label="借款编号"> </el-table-column>
        <el-table-column prop="borrower" label="借款方"> </el-table-column>
        <el-table-column prop="phone" label="借款人手机"> </el-table-column>
        <el-table-column prop="entitle" label="标名"> </el-table-column>
        <el-table-column prop="money" label="借款金额">
          <template slot-scope="scope">
            <span>{{ "￥" + scope.row.money }}</span>
          </template></el-table-column
        >
        <el-table-column
          prop="annual"
          label="年利率化"
          :formatter="annualState"
        >
        </el-table-column>
        <el-table-column prop="tbrepayment.rname" label="还款方式">
        </el-table-column>
        <el-table-column prop="deadline" label="期限"> </el-table-column>
        <el-table-column prop="putawaytime" label="上架时间">
          <span>{{ tableData.putawaytime | formatDate }}</span>
        </el-table-column>
        <el-table-column prop="saletime" label="开售时间">
          <span>{{ tableData.saletime | formatDate }}</span>
        </el-table-column>
        <el-table-column prop="paymoney" label="已投金额">
          <template slot-scope="scope">
            <span>{{ "￥" + scope.row.paymoney }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="speed" label="投资进度" :formatter="invest">
        </el-table-column>
        <el-table-column
          prop="tbstate.sname"
          label="状态"
          align="center"
        ></el-table-column>
        <el-table-column prop="action" label="操作" width="180px">
          <template slot-scope="scope">
            <el-button type="text" @click="edit(scope.row)">修改</el-button>
            |<el-button type="text" @click="down(scope.row)">下架</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div class="posAbt">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(total)"
        prev-text="上一页"
        next-text="下一页"
      >
      </el-pagination>
    </div>
    <!--下架弹窗-->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      注意：<span id="red"
        >标下架后，投资款项全部返还至投资者账户中，只能获得返还的本金，无法获得利息</span
      >
      <el-form>
        <el-form-item label="备注:" prop="remarks">
          <el-input type="textarea" v-model="remarks"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="markDown">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
import * as api from "@/api";

export default {
  name: "MarkMange",
  data() {
    return {
      peopleList: {
        pledge: "",
        borrower: "",
        phone: "",
        limit: "",
        page: ""
      },
      remarks: "",
      loading: true,
      input1: "",
      input2: "",
      currentPage: 1,
      pageSize: 10,
      total: "",
      tableData: [],
      selectVal: "",
      dialogFormVisible: false,
      centerDialogVisible: false,
      stateList: [
        {
          id: 40,
          sname: "已上架"
        },
        {
          id: 2,
          sname: "满标状态"
        }
      ],
      form: {
        num: "",
        borrower: "",
        phone: "",
        entitle: "",
        money: "",
        annual: "",
        state: ""
      }
    };
  },
  rules: {
    remarks: [{ required: true, message: "请填写理由", trigger: "blur" }]
  },
  async created() {
    this.getData();
  },
  methods: {
    getData() {
      api
        .queryBids({
          page: this.currentPage,
          size: this.pageSize,
          state: "40",
          keywords: {
            borrower: this.peopleList.borrower,
            phone: this.peopleList.phone
          }
        })
        .then(response => {
          this.loading = false;
          if (response.data.code == 200) {
            this.tableData = response.data.row;
            this.total = response.data.count;
          } else {
            this.$message.info("未检索到数据");
            this.tableData = [];
            this.total = 0;
          }
        })
        .catch(error => {
          this.loading = false;
          console.log(error);
        });
    },
    edit(obj) {
      this.dialogFormVisible = true;
      this.form.num = obj.num;
      this.form.borrower = obj.borrower;
      this.form.phone = obj.phone;
      this.form.entitle = obj.entitle;
      this.form.money = obj.money;
      this.form.annual = obj.annual;
      this.form.state = obj.state;
      this.form.id = obj.id;
    },
    submit() {
      api
        .updateBidInfo({
          id: this.form.id,
          num: this.form.num,
          borrower: this.form.borrower,
          money: this.form.money,
          phone: this.form.phone,
          entitle: this.form.entitle,
          annual: this.form.annual,
          state: this.form.state
        })
        .then(response => {
          console.log(response);
          if (response.data.code == 200) {
            this.dialogFormVisible = false;
            this.getData();
          } else {
            this.$message(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    down(row) {
      this.centerDialogVisible = true;
      this.state = row.state;
      this.num = row.num;
    },
    markDown() {
      console.log({
        num: this.num,
        remarks: this.remarks,
        state: this.state
      });
      this.$axios
        .post("/markApi/finance/loan/updating", {
          num: "" + this.num,
          remarks: "" + this.remarks,
          state: this.state
        })
        .then(response => {
          this.centerDialogVisible = false;
          console.log(response);
          this.getData();
        })
        .catch(error => {
          console.log(error);
        });
    },
    reBack() {
      this.dialogFormVisible = false;
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this.getData();
    },
    handleCurrentChange(value) {
      this.currentPage = value;
      this.getData();
    },
    annualState(row) {
      return row.annual * 100 + "%";
    },
    invest(row) {
      return row.speed ? row.speed.toFixed(2) * 100 + "%" : "0%";
    }
  },
  filters: {
    formatDate: function(value) {
      return moment(value).format("YYYY-MM-DD");
    }
  }
};
</script>

<style scoped>
.dialog-footer {
  display: flex;
  align-items: center;
}
.el-col-6 {
  margin-top: 20px;
  height: 40px;
}
#nav {
  padding: 10px;
}
#table {
  width: 100%;
}
#red {
  color: red;
}
</style>
